<style>
    * {
        margin:0;
        padding:0;
    }
    body{
        background-color: rgba(0,0,0,0.1);
    }
</style>
<body>
    <div id="container"></div>
    <script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
    <script id="vertexShader" type="x-shader/x-vertex">
        void main() {
            gl_Position = vec4( position, 1.0 );
        }
    </script>
    <!-- <script id="fragmentShader" type="x-shader/x-fragment">
        //彩虹
        #ifdef GL_ES
        precision mediump float;
        #endif

        #define PI 3.14159265359

        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;

        void main() {
            vec2 st = gl_FragCoord.xy/u_resolution.xy;
            
            //圆方程
            float r = (st.x-0.5) * (st.x-0.5) + st.y * st.y;

            // 构建6个圆
            float y1 = 0.45*0.45;
            float y2 = 0.40*0.40;
            float y3 = 0.35*0.35;
            float y4 = 0.30*0.30;
            float y5 = 0.25*0.25;

            vec3 color = vec3(1.0);

            if ( r <= y1 && r > y2 ) {
                color = vec3(1.0,0.0,0.0);
            } else if ( r <= y2 && r > y3 ) {
                color = vec3(0.8,0.6,0.0);
            } else if ( r <= y3 && r > y4 ) {
                color = vec3(0.4,0.8,0.5);
            } else if ( r <= y3 && r > y5 ) {
                color = vec3(0.0,1.0,0.2);
            }

            gl_FragColor = vec4(color,1.0);
        }

    </script> -->
    
    <!-- <script id="fragmentShader" type="x-shader/x-fragment">
        //五彩的旗子
        #ifdef GL_ES
        precision mediump float;
        #endif

        #define PI 3.14159265359

        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;

        float plot (vec2 st, float pct){
            return  step( pct, st.y);
        }

        void main() {
            vec2 st = gl_FragCoord.xy/u_resolution.xy;
            vec3 color = vec3(1.0);
            float y = step(0.2,st.y);

            color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0)

            gl_FragColor = vec4(color,1.0);
        }

    </script> -->
    
    <script id="fragmentShader" type="x-shader/x-fragment">
        //五彩的旗子
        #ifdef GL_ES
        precision mediump float;
        #endif

        #define PI 3.14159265359
        #define TWO_PI 6.28318530718

        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;

        vec3 hsb2rgb( in vec3 c ){
            vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
                                    6.0)-3.0)-1.0,
                            0.0,
                            1.0 );
            rgb = rgb*rgb*(3.0-2.0*rgb);
            return c.z * mix( vec3(1.0), rgb, c.y);
        }

        void main() {
            vec2 st = gl_FragCoord.xy/u_resolution;
            vec3 color = vec3(0.0);
        
            // Use polar coordinates instead of cartesian
            vec2 toCenter = vec2(0.5)-st;
            float angle = atan(toCenter.y,toCenter.x);
            float radius = length(toCenter)*2.0;
        
            // Map the angle (-PI to PI) to the Hue (from 0 to 1)
            // and the Saturation to the radius
            color = hsb2rgb(vec3((angle/TWO_PI)+0.5,radius,1.0));
        
            gl_FragColor = vec4(color,1.0);
        }

    </script>
    
    <script>
        var container;
        var camera, scene, renderer;
        var uniforms;

        init();
        animate();

        function init() {
            container = document.getElementById( 'container' );

            camera = new THREE.Camera();
            camera.position.z = 1;

            scene = new THREE.Scene();

            var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

            uniforms = {
                u_time: { type: "f", value: 1.0 },
                u_resolution: { type: "v2", value: new THREE.Vector2() }
            };

            var material = new THREE.ShaderMaterial( {
                uniforms: uniforms,
                vertexShader: document.getElementById( 'vertexShader' ).textContent,
                fragmentShader: document.getElementById( 'fragmentShader' ).textContent
            } );

            var mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );

            container.appendChild( renderer.domElement );

            onWindowResize();
            window.addEventListener( 'resize', onWindowResize, false );
        }

        function onWindowResize( event ) {
            renderer.setSize( window.innerHeight/2, window.innerHeight/2 );
            uniforms.u_resolution.value.x = renderer.domElement.height/2;
            uniforms.u_resolution.value.y = renderer.domElement.height/2;
        }

        function animate() {
            requestAnimationFrame( animate );
            render();
        }

        function render() {
            uniforms.u_time.value += 0.05;
            renderer.render( scene, camera );
        }
    </script>
</body>